<template>
    <div class="step_one">
        <div class="title">活动信息</div>
        <el-form label-width="98px">
            <el-form-item label="活动标题" required>
                <el-input v-model="form.activity_name" placeholder="请输入标题名称" maxlength="20" show-word-limit />
            </el-form-item>
            <el-form-item label="活动有效期" :required="form.period_type == 2">
                <el-radio-group v-model="form.period_type" :disabled="isPeriodType">
                    <el-radio :label="1">永久</el-radio>
                    <el-radio :label="2">固定期限</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.period_type == 2" class="effect_time">
                <el-date-picker
                    v-model="form.effect_time"
                    style="width: 100%"
                    type="datetimerange"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    range-separator="—"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    prefix-icon="Calendar"
                    :disabled-date="time => time.getTime() < Date.now() - 8.64e7"
                    :default-time="defaultTime()"
                    @change="onTimeChange">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="活动说明">
                <el-input
                    v-model="form.description"
                    type="textarea"
                    placeholder="请输入活动说明"
                    :rows="6"
                    maxlength="30"
                    show-word-limit />
            </el-form-item>
            <div class="divider"></div>
            <div class="title">活动设置</div>
            <el-form-item label="活动形式">
                <el-radio-group v-model="form.activity_form" :disabled="status == '2' && type === 'edit'">
                    <el-radio :label="1" :disabled="official != '2'">
                        <Popover text="h5" content="活动以h5链接的形式进行访问" />
                    </el-radio>
                    <el-radio :label="2" :disabled="xcx != '2'">
                        <Popover text="小程序" content="活动以微信小程序的形式进行访问（需要设置小程序）" />
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.activity_form == 2" label="授权设置">
                <div class="auth_setting_box">
                    <Popover text="手机号授权" content="手机号获取后，待用户添加好友，将手机号同步至备注手机号中" />
                    <el-switch
                        v-model="form.auth_setting"
                        class="auth_setting"
                        :active-value="1"
                        :inactive-value="2"
                        :disabled="status == '2' && type === 'edit'" />
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import Popover from './Popover.vue';
import { reactive, ref, onMounted, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { defaultTime } from '@/utils/utils';
const route = useRoute();
const xcx = route.query.xcx;
const official = route.query.official;
const type = route.query.type;
const status = route.query.status;
const form = reactive({
    activity_name: '',
    period_type: 1,
    effect_time: [],
    description: '',
    activity_form: 2,
    auth_setting: 1
});
const effectTime = ref([]);
const isPeriodType = ref(false); // 活动有效期类型是否可更改
const onTimeChange = (v: any) => {
    nextTick(() => {
        v || (form.effect_time = []);
        if (status == '2' && type === 'edit') {
            // 永久不可更改；固定期限可以调整结束日期（必须大于当前时间）
            form.effect_time[0] = effectTime.value[0];
        }
    });
};

// 兜底校验
const validate = () => {
    return new Promise((resolve, reject) => {
        if (!form.activity_name) {
            ElMessage.warning('请输入活动标题');
            return;
        }
        if (form.period_type == 2 && form.effect_time.length == 0) {
            ElMessage.warning('请选择活动有效期');
            return;
        }
        if (form.period_type == 2) {
            const endTime = new Date(form.effect_time[1].replace(/-/g, '/')).getTime();
            const nowTime = new Date().getTime();
            if (endTime < nowTime) {
                ElMessage.warning('结束时间不能小于当前时间');
                return;
            }
        }
        resolve(true);
    });
};
onMounted(() => {
    if (xcx != '2') {
        // 小程序未授权选择 h5
        form.activity_form = 1;
    } else if (official != '2') {
        // h5未授权选择 小程序
        form.activity_form = 2;
    }
});
defineExpose({
    form,
    effectTime,
    isPeriodType,
    validate
});
</script>

<style scoped lang="scss">
.step_one {
    width: 520px;

    .title {
        margin-bottom: 24px;
        font-size: 16px;
        font-weight: 500;
        color: #33302d;

        &::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 16px;
            background: #ff6b00;
            margin-right: 6px;
            vertical-align: top;
        }
    }

    .el-form-item {
        margin-bottom: 10px;
    }

    .divider {
        width: 800px;
        height: 1px;
        background: #e5e5e5;
        margin: 24px 0;
    }

    .activity_form {
        display: flex;
        align-items: center;

        img {
            width: 16px;
            margin-left: 4px;
        }
    }

    .auth_setting_box {
        height: 100%;
        display: flex;
        align-items: center;

        .auth_setting {
            margin-left: 20px;
        }
    }

    .effect_time {
        margin-bottom: 24px;
    }
}
</style>
